import React, { Component } from 'react'
import styles from './index.less'
import { CanvasContext } from '@/Context'
export default class StretchDots extends Component {
	static contextType = CanvasContext
	// 伸缩组件
	onMouseDown = e => {
		const direction = e.target.dataset.direction
		if (!direction) return

		e.stopPropagation()
		e.preventDefault()

		let startX = e.pageX
		let startY = e.pageY

		const { zoom } = this.props
		const move = e => {
			const x = e.pageX
			const y = e.pageY

			let disX = x - startX
			let disY = y - startY

			disX = disX * (100 / zoom)
			disY = disY * (100 / zoom)
			let newStyle = {}

			// todo top:top改变只处于上三个点进行拖动
			// todo left:,left只处于左三个点进行拖动,因此可以作为判断条件
			if (direction) {
				if (direction.indexOf('top') >= 0) {
					disY = 0 - disY
					newStyle.top = -disY
				}

				if (direction.indexOf('left') >= 0) {
					disX = 0 - disX
					newStyle.left = -disX
				}
			}
			// 计算新行高，用于文本组件等比伸缩
			// const newHeight = disY
			// Object.assign(newStyle, {
			// 	width: disX,
			// 	height: disY,
			// })
			// 文本组件等比伸缩 批量选中不支持
			// if (cmp.style.fontSize) {
			// 	// 新行高 / height 为缩放倍数
			// 	const n = newHeight / cmp.style.height
			// 	let newFonitSize = n * cmp.style.fontSize
			// 	newFonitSize =
			// 		newFonitSize < 12 ? 12 : newFonitSize > 130 ? 130 : newFonitSize
			// 	Object.assign(newStyle, {
			// 		lineHeight: newHeight + 'px',
			// 		fontSize: newFonitSize,
			// 	})
			// }
			Object.assign(newStyle, {
				width: disX,
				height: disY,
			})
			this.context.updateAssemblyCmps(newStyle)
			// 因为移动一直在变化可视的渲染,所以移动后记录当前的点作为下一次的起点
			startX = x
			startY = y
		}
		const up = () => {
			this.context.recordCanvasChangeHistory()
			document.removeEventListener('mousemove', move)
			document.removeEventListener('mousemove', up)
		}
		document.addEventListener('mousemove', move)
		document.addEventListener('mouseup', up)
	}

	render() {
		const { style } = this.props
		const { width, height, transform } = style
		return (
			<>
				{/* 左上角 */}
				<div
					className={styles.assetDragBorder}
					style={{
						top: -6,
						left: -6,
						cursor: 'nw-resize',
						transform: transform,
					}}
					data-direction="top left"
					onMouseDown={this.onMouseDown}
				></div>
				{/* 上中 */}
				<div
					className={styles.assetDragBorder}
					style={{
						top: -6,
						left: width / 2 - 6,
						cursor: 'n-resize',
						transform: transform,
					}}
					onMouseDown={this.onMouseDown}
					data-direction="top"
				></div>
				{/* 右上角 */}
				<div
					className={styles.assetDragBorder}
					style={{
						top: -6,
						left: width - 6,
						cursor: 'ne-resize',
						transform: transform,
					}}
					onMouseDown={this.onMouseDown}
					data-direction="top right"
				></div>
				{/*  右中下 */}
				<div
					className={styles.assetDragBorderRight}
					style={{
						top: height / 2 - 8,
						left: width - 3,
						cursor: 'e-resize',
						transform: transform,
					}}
					onMouseDown={this.onMouseDown}
					data-direction="right"
				></div>
				{/* 右下角 */}
				<div
					className={styles.assetDragBorder}
					style={{
						top: height - 6,
						left: width - 6,
						cursor: 'se-resize',
						transform: transform,
					}}
					onMouseDown={this.onMouseDown}
					data-direction="bottom right"
				></div>
				{/* 下中 */}
				<div
					className={styles.assetDragBorder}
					style={{
						top: height - 5,
						left: width / 2 - 6,
						cursor: 's-resize',
						transform: transform,
					}}
					onMouseDown={this.onMouseDown}
					data-direction="bottom"
				></div>
				{/* 左下角 */}
				<div
					className={styles.assetDragBorder}
					style={{
						top: height - 6,
						left: 0 - 6,
						cursor: 'sw-resize',
						transform: transform,
					}}
					onMouseDown={this.onMouseDown}
					data-direction="bottom left"
				></div>
				{/* 左中 */}
				<div
					className={styles.assetDragBorderLeft}
					style={{
						top: height / 2 - 8,
						left: 0 - 6,
						cursor: 'w-resize',
						transform: transform,
					}}
					onMouseDown={this.onMouseDown}
					data-direction="left"
				></div>
			</>
		)
	}
}
